<template>
  <div class="outbox">
  <div id="main" class="main">
      <h2 class="login"> 登录 </h2>
      <ul>
      
      <li><input v-model="username" type="text" placeholder="Username"></li>
      <li><input v-model="password" type="password" placeholder="Password"></li>
      <li><button @click="login">LOGIN</button></li>
    </ul>
  </div>
</div>
</template>

<script>
// @ is an alias to /src

import axios from 'axios';
export default {
  name: 'LoginView',
  data(){
    return{
      username:'',
      password:''
    }
  },
  methods:{
    async login(){
      let data ={
        username:this.username,
        password:this.password
      }
      try{
        axios.request({
          method:'post',
          data:data,
          url:'/api/login'
        })
      setTimeout(()=>{
          this.getLoginInfo()
      },2000)
        
        
      }catch(err){
        if(err == undefined){
          return
        }
        
      }
    },
    async getLoginInfo(){
      
      try{
        let response = await axios.request({
          method:"post",
          url:'/api/get_login_info'
        })
        console.log(response)
        if(response.data.login == '1'){
          alert("登录成功")
          let data ={
            username:this.username
          }
          window.localStorage.setItem("username",this.username)
          alert("login Success :"+data.username)
          this.$router.push('/about')   
        }else{
          alert("用户名或者密码错误")
        }
      }catch(err){
        return
      }
    }
  }
}
</script>
<style scoped>
  .outbox{
    width:100%;
    height: 100%;
    animation: bg-ani 15s infinite;
    perspective: 800px;
  }
  @keyframes  bg-ani {
  0%{background: url('@/assets/bg2.png') no-repeat;background-size:130%;;background-position: 0% 30%;}
  30%{background: url('@/assets/bg2.png') no-repeat;background-size:130%;;background-position: 10% 30%;}
  31%{background: url('@/assets/bg4.jpg') no-repeat;background-size:130%;;background-position: 0% 10%;}
  60%{background: url('@/assets/bg4.jpg') no-repeat;background-size:130%;;background-position: 0% 0%;}
  61%{background: url('@/assets/bg3.png') no-repeat;background-size:130%;;background-position: 0% 0%;}
  99%{background: url('@/assets/bg3.png') no-repeat;background-size:130%;;background-position: 0% 30%;}
  100%{
    background:none;
  }}

  .main{
    position:absolute;
    left:50%;
    top:50%;
    width:400px;
    height:300px;
    transform:translate(-50%,-50%);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(235, 254, 255, 0.641);
    border-radius: 15px;
    transition-duration: 0.5s;
}
.login{
  font-weight: bold;
  font-size: 20px;
  border-bottom: yellow 2px solid;
}
input::-webkit-input-placeholder{
  color:rgb(14, 52, 59) ;
}
.main li{
  color:rgb(14, 52, 59);
  list-style-type:none;
  text-align:center;
  padding-top:10px;


}

li input{
  font-size:20px;
  border:none;
  box-sizing:border-box;
  padding:5px;
  background:transparent;
  border-bottom: 1px solid rgb(14, 52, 59);
}
li button{
  font-size:20px;

  padding:5px;
  background:rgb(0, 182, 232);
  transform:skewX(-20deg);
  border-radius:5px;
  width:150px;
  margin-top:10px;
  transition:0.2s linear;
}
li button:hover{
  background:white;
  color:black;
}


</style>
